<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>    
        function doGet(){
            var mytr=document.getElementById("mytr");//DOM对象
            // DOM对象.nodeType  获取节点的类型值(元素：1    属性：2)
            // DOM对象.nodeName 获取节点的名称
            console.log("节点类型:"+mytr.nodeType);
            console.log("节点名称:"+mytr.nodeName);//TR 


            //获取元素的父节点（元素的父元素的DOM对象）
            // DOM对象.parentNode
            var parent=mytr.parentNode;
            console.log(parent);

            //获取元素的子节点的集合
            // DOM对象.children
            var children=mytr.children;
            // console.log(children);
            // for(var i=0;i<children.length;i++){
            //     console.log(children[i]);
            // }

            //获取元素的第一个子节点
            // DOM对象.firstElementChild
            console.log(mytr.firstElementChild);

            //获取元素的最后一个子节点
            console.log(mytr.lastElementChild);


            //获取元素的属性的集合
            // DOM对象.attributes
            console.log(mytr.attributes);//集合
            var attrs=mytr.attributes;
            for(var i=0;i<attrs.length;i++){
                // console.log(attrs[i]);//id="mytr"   class="heihei"   hello="world"
                // console.log("属性的名称:"+attrs[i].name+",属性值:"+attrs[i].value);
                console.log("属性节点的类型值:"+attrs[i].nodeType);
                console.log("属性的节点的名称:"+attrs[i].nodeName);
            }

            var ul=document.querySelector("ul");
            // 获取与当前元素同级别的前一个元素
            // DOM对象.previousElementSibling
            // var prev=ul.previousElementSibling;
            // console.log(prev);

            // 获取与当前元素同级别的后一个元素
            // DOM对象.nextElementSibling
            // var next=ul.nextElementSibling;
            // console.log(next);



                
        }
    </script>
</head>
<body>
    <input type="button" value="获取元素" onclick="doGet()">
    <div>div1</div>
    <div>div2</div>
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
    </ul>
    <p>p01</p>
    <table>
        <thead>
            <tr id="mytr" class="heihei" hello="world">
                <th>th01</th>
                <th>th02</th>
                <th>th03</th>
                <th>th04</th>
                <th>th05</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
        </tbody>
    </table>
</body>
</html>